<template>
    <div id="good_params" v-if="Object.keys(message).length !== 0">
        <div class="params">
            <p class="title">{{message.infos.key}}</p>
            <table class="params_table">
                <tr v-for="(item,index) in message.infos.set" :key="index">
                    <td>{{item.key}}</td>
                    <td>{{item.value}}</td>
                </tr>
            </table>
            <p class="title">{{message.sizes.key}}</p>
            <table class="size">
                <tr v-for="(item,index) in message.sizes.tables[0]" :key="index">
                    <td v-for="(items,index) in item" :key="index">{{items}}</td>

                </tr>
            </table>
            <p class="title" style="font-size: 14px">{{message.sizes.desc}}</p>
        </div>
    </div>
</template>

<script>
    export default {
        name: "GoodParams",
        props:{
            message:{}
        }
    }
</script>

<style scoped>
    .title{
        text-align: center;
        color: lightpink;
        font-style: italic;
        font-weight: bolder;
        margin-top: 15px;
    }
    .params_table{
        width: 100%;
        font-size: 10px ;
        margin-top: 15px;
        padding-bottom: 15px;
        border-bottom: 2px salmon solid;
    }
    .params_table tr{
        height: 40px;
    }
    .params_table td{
        text-align: center;
        border-bottom: 1px silver solid;
    }
    .size{
        width: 100%;
        margin-top: 15px;
        font-size: 13px ;
    }
    .size tr{
        text-align: center;
        height: 40px;
    }
    .size td{
        border-bottom: 1px silver solid;
    }

</style>